<template>
  <div class="tw-bg-[#f5f7f9]">
    <!-- 顶部栏 -->
    <IndexHeader ref="headerRef" :selectedIndex="1"></IndexHeader>
    <!--    课程中心导航-->
    <Header
        class="tw-mb-40"
        :courseType="data.courseType"
        @changeCenter="changeCenter"
        @openPopup="openPopup"
    ></Header>
    <div class="container ">
      <div class="flex-between height100 tw-my-20">
        <!--      课程中心-->
        <CourseCardGroup
            :bannerList="data.courseCenterBannerList"
            :goodsList="data.goodsList"
            @goGoodsInfo="goGoodsInfo"
        ></CourseCardGroup>
        <exam-process
            :configIndex="data.configIndex"
            :listFlow="data.listFlow"
        ></exam-process>
      </div>
      <div class="flex-between tw-pb-20">
        <free-doc-list
            :freeDocList="data.freeDocList"
            @goNewsInfo="goFreeDoc"
        ></free-doc-list>
        <news :newsList="data.newsList" @goNewsInfo="goNewsInfo"></news>
      </div>
    </div>
  </div>
  <course-dialog
      v-model:displayDio="data.displayDio"
      v-model:isLogin="data.isLogin"
      :wechat="data.wechat"
      @clickRefresh="clickRefresh"
  ></course-dialog>
  <!--    底部栏-->
  <Footer/>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {listArticleByIntentExam, listBanner,} from "@/api/home.js";
import {useRoute, useRouter} from "vue-router";
import {configIndex, listFlow, wechatUser} from "@/api/course.js";
import {listGoods} from "@/api/goods.js";
import CourseCardGroup from "@/views/component/course-card-group.vue";
import ExamProcess from "@/views/course/component/exam-process.vue";
import CourseDialog from "@/views/course/component/course-dialog.vue";
import FreeDocList from "@/views/course/component/free-doc-list.vue";
import News from "@/views/course/component/news.vue";
import IndexHeader from "@/views/component/header.vue";
import Header from "@/views/course/component/header.vue";
import Footer from "@/views/component/footer.vue";

const route = useRoute();
const router = useRouter();
const data = reactive({
  freeDocList: [],
  courseTypeList: [],
  catalogId: 5,
  courseType: 15,
  provinceId: 115,
  intentionalExamFlag: 1,
  newsList: [],
  courseCenterBannerList: [],
  examTrendList: [],
  goodsList: [],
  listFlow: [],
  displayDio: false,
  isLogin: false, //登录状态 弹窗内容显示
  wechat: {},
  configIndex: {},
  type: 1,
});
const goNewsInfo = (obj) => {
  const {href} = router.resolve({
    path: "/article/info",
    query: {
      id: obj.id,
    },
  });
  window.open(href, "_blank");
}

function goFreeDoc(obj) {
  data.type = 0
  if (obj.type == 1 && !localStorage.getItem("token")) {
    data.displayDio = true;
  } else {
    if (obj.type) {
      let show = clickRefresh(478);
      if (!show && obj.type == 1) {
        return;
      }
    }

    const {href} = router.resolve({
      path: "/article/info",
      query: {
        id: obj.id,
      },
    });
    window.open(href, "_blank");
  }
}

// 页面初始化
const initExamTrend = () => {
  data.catalogId = 'MIANFEIZILIAO';
  let listArticleObj = {
    catalogCode: data.catalogId,
    courseType: data.courseType,
    provinceId: data.provinceId,
    intentionalExamFlag: data.intentionalExamFlag,
  };
  listArticleByIntentExam(listArticleObj, (res) => {
    data.freeDocList = res.data;
  });
  data.catalogId = 'REDIAN';
  let newsList = {
    catalogCode: data.catalogId,
    courseType: data.courseType,
    provinceId: data.provinceId,
    intentionalExamFlag: data.intentionalExamFlag,
  };
  listArticleByIntentExam(newsList, (res) => {
    data.newsList = res.data;
  });
  postListFlow();
  getCourseCenterBanner(data.courseType, data.provinceId);
  postConfigIndex();
};

function getCourseCenterBanner(courseType, provinceId) {
  data.courseCenterBannerList = [];
  let requestData = {
    catalogCode: "courseCenterCode",
    courseType: courseType,
    provinceId: provinceId,
  };
  listBanner(requestData, (res) => {
    data.courseCenterBannerList = res.data;
  });
}

// 获取课程列表
const listCourse = () => {
  data.goodsList = [];
  listGoods({categoryId: data.courseType}, (res) => {
    data.goodsList = res.data;
    data.goodsList.map((item) => {
      item.type = "course";
    });
  });
};
// 更改地区和大类
const changeCenter = (item) => {
  for (let itemKey in item) {
    data[itemKey] = item[itemKey];
  }
  listCourse();
  initExamTrend();

};
// 获取考试流程
const postListFlow = () => {
  let allDate = {
    courseType: data.courseType,
    provinceId: data.provinceId,
  };
  listFlow(allDate, (res) => {
    data.listFlow = res.data;
  });
};
// 弹窗
const openPopup = (type) => {

  data.type = type
  data.displayDio = true;
  clickRefresh(438)

};
// 导航栏实例
let headerRef = ref()
// 刷新
const clickRefresh = (type, index) => {
  data.displayDio = true;
  headerRef.value.userIsLogin()
  wechatUser({addSource: type, courseType: data.courseType}, (res) => {
    data.wechat = res.data;
    data.displayDio = res.data.addWechatFlag == 1 ? false : true;

    if (index == 1) {
      data.displayDio = true;
    }
    return res.data.addWechatFlag == 1 ? false : true;
  });
  postConfigIndex()
};
// 获取课程时间客服
const postConfigIndex = () => {
  let allData = {
    courseType: data.courseType,
    addSource: 438,
    userId: localStorage.getItem("id"),
    provinceId: data.provinceId
  };
  configIndex(allData, (res) => {
    data.configIndex = res.data;
  });
};

// 跳转商品详情
function goGoodsInfo(id) {
  const {href} = router.resolve({
    path: "/goods/info",
    query: {
      id: id,
    },
  });
  window.open(href, "_blank");
}

onMounted(() => {
  //   判断是否登录
  data.isLogin = localStorage.getItem("token") ? true : false;
});
</script>

<style lang="scss" scoped></style>
